<template>
    <div class="per">
        <h1>props的使用</h1>
        <ul>
            <li v-for="item in list" :key="item.id">
                {{ item.name }} -- {{ item.age }}
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="Person">
import {defineProps, withDefaults} from "vue";
import {type Persons} from "@/types";
// 只接收list
// defineProps(['list'])

// 接收list + 限制类型 + 限制必要性
defineProps<{list?:Persons}>()


// 接收list，同时将props保存起来  有返回值
// let x = defineProps(['list'])
// console.log(x.list)

</script>

<style scoped>

button {
    margin-right: 10px;
}
</style>
